<template>
    <div class="utils-view-container">
        <div class="utils-view-search">
            <input class="utils-item-keyword" type="text" placeholder="输入关键字查询" v-model="keyword">
        </div>
        <div class="utils-view-content">
            <div class="utils-item" v-for="(item, i) in filterItem"
                :style="{ '--j': Math.floor(i / 6) + 1, '--i': i % 6 + 1 }" @click=openUtil(item.path)><span>{{
                    item.title }}</span>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "UtilsView",
    data() {
        return {
            keyword: "",
            itemList: [
                {
                    title: "JSON格式化",
                    path: "/utils/JsonParseUtil",
                },
                {
                    title: "BASE64图片转换",
                    path: "/utils/Base64ImageUtil",
                },
                {
                    title: "时间戳转换",
                    path: "/utils/TimeStampUtil",
                },
                // {
                //     title: "CRON表达式",
                //     path: "/utils/CronUtil",
                // },
                {
                    title: "屏幕录制",
                    path: "/utils/RecordUtil",
                },
                // {
                //     title: "算法加解密",
                //     path: "/utils/RecordUtil",
                // },
            ],
        }
    },
    computed: {
        filterItem: function () {
            let list = [];
            if (!this.keyword || this.keyword === '') {
                list = this.itemList;
                return list;
            }
            for (const item of this.itemList) {
                if (item.title.indexOf(this.keyword) > -1) {
                    list.push(item);
                }
            }
            return list;
        },
    },
    methods: {
        openUtil(path) {
            window.open(path, "_blank");
        },
    },
    mounted() {

    },
    beforeUnmount() {
    },
}
</script>

<style scoped>
.utils-view-container {
    width: 100vw;
    height: 100vh;
    display: flex;
    background-color: #222;
    background-image: linear-gradient(to right, #333 1px, transparent 1px), linear-gradient(to bottom, #333 1px, transparent 1px);
    background-size: 40px 40px;
}

.utils-view-search {
    width: 100%;
    height: 70px;
    position: absolute;
    display: flex;
    justify-content: center;
}

.utils-view-content {
    width: 100%;
    height: calc(100% - 70px);
    top: 10%;
    position: absolute;
    display: grid;
    grid-auto-rows: 100px;
    gap: 40px;
    overflow-y: auto;
}

.utils-item {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    background: #7c7b7b;
    grid-row: var(--j);
    grid-column: calc(var(--i))/span 1;
    cursor: pointer;
}

.utils-item:hover {
    background: #11b4d9;
    transform: scale(1.05);
    transition: 0.5s;
}

.utils-item>span {
    text-align: center;
    font-size: 20px;
    font-weight: bolder;
    color: #2c2c2c;
    user-select: none;
}

.utils-item:hover>span {
    transition: 1s;
}

.utils-item-keyword {
    position: relative;
    top: 10px;
    right: 50px;
    width: 300px;
    height: 50px;
    border-radius: 8px;
    font-size: 20px;
}
</style>